<template>
  <div>

    <el-form ref="form" :model="brand" label-width="150px">
      <el-form-item label="品牌名称">
        <el-input v-model="brand.name"></el-input>
      </el-form-item>
      <el-form-item label="品牌首字母">
        <el-input v-model="brand.firstLetter"></el-input>
      </el-form-item>


      <el-form-item label="品牌LOGO">
        <el-upload
          class="upload-demo"
          action="/dev-api/file/upload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :file-list="fileList"
          list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <img :src="brand.logo" alt="图片损坏" width="80px">
      </el-form-item>


      <el-form-item label="品牌专区大图">
        <el-upload
          class="upload-demo"
          action="/dev-api/file/upload"
          :on-preview="handlePreview1"
          :on-remove="handleRemove1"
          :on-success="handleSuccess1"
          list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <img :src="brand.bigPic" alt="图片损坏" width="80px">
      </el-form-item>


      <el-form-item label="品牌故事">
        <el-input v-model="brand.brandStory"></el-input>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="brand.sort"></el-input>
      </el-form-item>
      <el-form-item label="是否显示">
        <template>
          <el-radio v-model="brand.showStatus" :label="1">是</el-radio>
          <el-radio v-model="brand.showStatus" :label="2">否</el-radio>
        </template>
      </el-form-item>
      <el-form-item label="品牌制造商">
        <template>
          <el-radio v-model="brand.factoryStatus" :label="1">是</el-radio>
          <el-radio v-model="brand.factoryStatus" :label="2">否</el-radio>
        </template>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>


  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {update} from "@/api/product/brand";

export default {
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"

    return {
      brand:{},

    };
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    onSubmit(){
        update(this.brand).then(res=>{
          this.$message.success("修改成功")
          this.$router.push('/product/brand')
        })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    handleSuccess(file){
      console.log(file)
      this.brand.logo=file.data.url
    },
    handleRemove1(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview1(file) {
      console.log(file);
    },
    handleExceed1(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove1(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    handleSuccess1(file){
      console.log(file)
      this.brand.bigPic=file.data.url
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.brand=this.$route.query.brand
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>

</style>
